<template>
	<view>
		<TopNav title="设备详情"></TopNav>
		<view class="card flex justify-between align-center">
			<view class="flex flex-direction flex-1">
				<view>
					<view class="title-box">
						<text class="title">{{deviceInfo.name}}</text>
						<text v-if="deviceInfo.lastData">{{deviceInfo.lastData.value===1?'正在运行':'停止运行'}}</text>
						<text v-else>停止运行</text>
					</view>
					<view class="flex flex-direction">
						<text>启动时间：{{deviceInfo.lastRun?deviceInfo.lastRun.startTime:'-'}}</text>
						<text>启动方式：{{deviceInfo.lastRun?(deviceInfo.lastRun.operaType===1?'自动':'手动'):'-'}}</text>
						<text>运行时长：{{deviceInfo.lastRun?deviceInfo.lastRun.runTimeStr:'-'}}</text>
					</view>
				</view>
				<view class="flex justify-start margin-top-sm">
					<u-button custom-style="width:100px;margin-left:0px"  size="small" type="primary" text="设备信息"></u-button>
					<u-button custom-style="width:100px;margin-left:0px" size="small" type="warning" text="监控联动"></u-button>
				</view>
			</view>
			<view>
				<view @click="handleControl(deviceInfo)" class="circle-ptz" :class="(deviceInfo.lastData && deviceInfo.lastData.value===1)?'circle-ptz-run':'circle-ptz-stop'">
					<text v-if="deviceInfo.lastData && deviceInfo.lastData.value===1">
					 停止运行
					</text>
					<text v-else>开始运行</text>
				</view>
			</view>
		</view>
		
		<view class="card">
			<view>
				<view class="title-box">
					<text class="title">设备位置</text>
				</view>
				<view class="flex justify-between">
					<view class="flex flex-1 justify-center align-center" style="background-color: beige;height: 100px;">
						<text style="color: white;">占位</text>
					</view>
					<view class="flex  flex-1 justify-center align-center" style="background-color:bisque;height: 100px;">
						<text style="color: white;">占位</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="card">
			<view class="title-box">
				<text class="title">近一周启动统计</text>
			</view>
			<view>
				<qiun-data-charts type="line" :opts="realOpts" :chartData="comparisonData" :ontouch="true" :canvas2d="canvas2d" canvasId="JweGyOILnXRyqFODymxjyEXdqakoXcin2" />
			</view>
		</view>
		
		<view class="card">
			<view>
				<view style="padding: 10px;" class="flex align-center justify-between">
					<text class="title">监测记录</text>
					<view @click="handleDatePicker" style="width: 130px;">
						<u--input v-model="dateStr" readonly placeholder="后置图标" suffixIcon="calendar"
							suffixIconStyle="color: #909399"></u--input>
					</view>
					
				</view>
		
				<view>
					<uni-table border stripe emptyText="暂无更多数据">
						<!-- 表头行 -->
						<uni-tr>
							<uni-th width="100" align="center">时间</uni-th>
							<uni-th width="100" align="center">启动方式</uni-th>
							<uni-th width="100" align="center">运行时长</uni-th>
						</uni-tr>
						<!-- 表格数据行 -->
						<uni-tr v-for="(item, index) in tableList" :key="index">
							<uni-td>{{item.startTime}}</uni-td>
							<uni-td>{{item.operaType===1?'自动':'手动'}}</uni-td>
							<uni-td>{{item.runTimeStr}}</uni-td>
						</uni-tr>
					</uni-table>
					<view class="uni-pagination-box" style="margin-top: 10upx;"><uni-pagination show-icon :page-size="queryParams.pageSize" v-model="queryParams.page" :total="total" @change="getDataTable" /></view>
				</view>
			</view>
		</view>
		 <u-datetime-picker
			ref="datetimePicker"
		                :show="show"
		                v-model="date"
						@confirm="confirm"
						@close="handleClose"
						@cancel="handleClose"
		                mode="date"
		        ></u-datetime-picker>
	</view>
</template>

<script>
	import {
		getPondDeviceRunTable,
		getPondDeviceWeekRunChat,
		deviceControl,
		getSingleDeviceData
	} from '@/api/mine/equipment/deviceData'
	import {
		getDeviceDetail
	} from '@/api/mine/equipment/index'
	import dayjs from 'dayjs'
	export default {
		data() {
			return {
				deviceInfo:{
					
				},
				queryParams:{
					deviceId:undefined,
					pondId:undefined,
					startTime:undefined,
					endTime:undefined,
					page:1,
					pageSize:20,
				},
				total:0,
				show: false,
				//日期
				date: Number(new Date()),
				dateStr:uni.$u.timeFormat(this.date,'yyyy-mm-dd'),
				//表格数据
				tableList: [],
				realOpts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 10, 0, 15],
					enableScroll: true,
					dataLabel: true,
					dataPointShape: true,
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true,
						scrollShow: true,
						itemCount: 5,
						scrollAlign:'right'
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						line: {
							type: "curve",
							width: 2,
							activeType: "hollow"
						}
					}
				},
				comparisonData:{
					categories: ['4-24','4-25'],
					series: [{
						name:'启动次数',
						data:[3,1]
					}]
				},
				canvas2d:true
			}
		},
		computed:{
		},
		onLoad(query) {
			this.queryParams.deviceId=query.deviceId
			this.queryParams.pondId = query.pondId
			this.getDataTable()
			this.getDeviceDetail()
			this.getDataComparison()
		},
		onReady() {
		},
		methods: {
			handleControl(item){
				let switcher = item.lastData?(item.lastData.value===1?0:1):1
				deviceControl({deviceId:item.id,switcher:switcher}).then(res=>{
					
					this.getDeviceDetail()
					
					getSingleDeviceData({deviceId:item.id}).then(res=>{
						item.lastData.value = res.data.value
					})
					
					
				})
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			getDeviceDetail(){
				getDeviceDetail(this.queryParams).then(res=>{
					this.deviceInfo = res.data
				})
			},
			handleDatePicker(){
				this.canvas2d = false
				this.show=true
				
			},
			handleClose(){
				this.canvas2d = true
				this.show=false
			},
			confirm(e) {
				this.canvas2d = true
				this.show=false
				this.dateStr = uni.$u.timeFormat(e.value,'yyyy-mm-dd')
				this.getDataTable()
				this.getDataComparison()
				// if(e.length>0){
				// 	this.date = e[0]
				// 	this.getDataComparison()
				// 	this.getDataTable()
				// 	this.getRealData()
				// }
			},
			//获取数据表格
			getDataTable() {
				this.queryParams.startTime = this.dateStr+" 00:00:00"
				this.queryParams.endTime = this.dateStr+" 23:59:59"
				getPondDeviceRunTable(this.queryParams).then(res=>{
					this.tableList = res.rows
					this.total = parseInt(res.total)
				})
			},
			//获取数据对比
			getDataComparison() {
				getPondDeviceWeekRunChat(this.queryParams).then(res=>{
					this.comparisonData.categories = res.data.categories
					this.comparisonData.series = res.data.series
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.card {
		margin: 20upx;
		padding: 30upx;
		background-color: white;
		border-radius: 10upx;
		
		.title-box{
			margin-bottom: 20upx;
			
			.title {
				margin-right: 20upx;
				font-weight: bold;
				font-size: 28upx;
			}
		}
		
		.circle-ptz{
		  color: white;
		  cursor: pointer;
		  height: 80px;
		  width: 80px;
		  border-radius: 100px;
		  display: flex;
		  justify-content: center;
		  align-items: center;
		}
		
		.circle-ptz-stop{
		  background-color: #d57878;
		}
		.circle-ptz-run{
		  background-color: #4f934f;
		}
	}
</style>
